<template>
  <xDialog v-model="isShow" width="550px" @open="handleOpen" @closed="handleClose" title="分配角色">
    <el-form>
      <el-form-item label="用户姓名">
        <el-input v-model="modalData.username" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="职位列表">
        <el-checkbox @change="handleCheckAllChange" v-model="checkAll" :indeterminate="isIndeterminate">
          全选
        </el-checkbox>
        <!-- 显示职位的的复选框 -->
        <el-checkbox-group v-model="userRole" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="(role, index) in allRole" :key="index" :label="role">{{ role.roleName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </xDialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import useDialog from '@/hooks/dialog'
import { defineProps, ref, toRefs } from 'vue'
import { reqAllRole, reqSetUserRole } from '@/api/acl/user'
const props = defineProps({
  modalData: { required: false, type: Object, default: () => {} },
  modalType: { required: false, type: String, default: 'add' }
})
const emit = defineEmits(['undated'])
//收集顶部复选框全选数据
const checkAll = ref<boolean>(false)
//控制顶部全选复选框不确定的样式
const isIndeterminate = ref<boolean>(false)
//存储全部职位的数据
let allRole = ref<any>([])
//当前用户已有的职位
let userRole = ref<any>([])
const { isShow, open, cancel, handleOpen, handleClose } = useDialog({
  props: props,
  beforeOpenFunction: () => {
    setRole()
  },
  beforeCloseFunction: () => {
    //清空数据
    allRole.value = []
    userRole.value = []
  }
})
let { modalData } = toRefs(props)

//分配角色按钮的回调
const setRole = async () => {
  //获取全部的职位的数据与当前用户已有的职位的数据
  let result = await reqAllRole(props.modalData.id as number)
  if (result.code === 200) {
    //存储全部的职位
    allRole.value = result.data.allRolesList
    //存储当前用户已有的职位
    userRole.value = result.data.assignRoles
  }
}
//顶部的全部复选框的change事件
const handleCheckAllChange = (val: boolean) => {
  //val:true(全选)|false(没有全选)
  userRole.value = val ? allRole.value : []
  //不确定的样式(确定样式)
  isIndeterminate.value = false
}
//顶部全部的复选框的change事件
const handleCheckedCitiesChange = (value: string[]) => {
  //顶部复选框的勾选数据
  //代表:勾选上的项目个数与全部的职位个数相等，顶部的复选框勾选上
  checkAll.value = value.length === allRole.value.length
  //不确定的样式
  isIndeterminate.value = value.length !== allRole.value.length
}
const save = async () => {
  //收集参数
  let data: any = {
    userId: props.modalData.id as number,
    roleIdList: userRole.value.map((item: any) => {
      return item.id as number
    })
  }
  //分配用户的职位
  let result: any = await reqSetUserRole(data)
  if (result.code === 200) {
    //提示信息
    ElMessage({ type: 'success', message: '分配职务成功' })
    emit('undated')
    //关闭抽屉
    isShow.value = false
  }
}
defineExpose({
  open
})
</script>

<style scoped></style>
